<template>
  <!-- 简单的查询表单封装 -->
  <a-form
      ref="formRef"
      layout="inline"
      class="search-form"
      :model="formState"
      @keyup.enter="handleQuery"
  >
    <template v-for="(item, index) in formSearchData" :key="index">
      <a-form-item
          :label="item.label"
          :name="item.name"
          v-show="isExpand ? isExpand : index < 2"
      >
        <template v-if="item.type === 'inputGroup'">
          <a-input-group compact>
            <a-select
                v-model:value="formState[item.name]"
                style="width: 150px"
                :placeholder="item.placeholder"
            >
              <a-select-option
                  :value="ele.value"
                  v-for="(ele, i) in item.options"
                  :key="i"
              >{{ ele.label }}
              </a-select-option
              >
            </a-select>
            <a-input
                v-model:value="formState[item.name]"
                :placeholder="item.placeholder"
                style="width: 50%"
            />
          </a-input-group>
        </template>
        <template v-if="item.type === 'input'">
          <a-input
              :allowClear="true"
              v-model:value="formState[item.name]"
              :placeholder="item.placeholder"
          >
          </a-input>
        </template>
        <!-- 单选 -->
        <template v-if="item.type === 'radio'">
          <a-radio-group
              v-model:value="formState[item.name]"
              :options="item.options"
              @change="handleQuery"
          />
        </template>
        <!-- 多选 -->
        <template v-if="item.type === 'checkbox'">
          <a-checkbox-group
              v-model:value="formState[item.name]"
              :options="item.options"
          />
        </template>
        <!-- Switch 开关 -->
        <template v-if="item.type === 'switch'">
          <a-switch
              v-model:checked="formState[item.name]"
              :checked-children="item.checkedChildren"
              :un-checked-children="item.unCheckedChildren"
              :unCheckedValue="item.unCheckedValue"
              :checkedValue="item.checkedValue"
              @change="handleQuery"
          />
        </template>
        <template v-else-if="item.type === 'cascader'">
          <a-cascader
              :options="item.options ? item.options : []"
              v-model:value="formState[item.name]"
              :placeholder="item.placeholder"
          />
        </template>
        <template v-else-if="item.type === 'date-picker'">
          <a-date-picker
              v-model:value="formState[item.name]"
              :placeholder="item.placeholder"
          />
        </template>
        <template v-else-if="item.type === 'month-picker'">
          <a-month-picker
              v-model:value="formState[item.name]"
              :placeholder="item.placeholder"
          />
        </template>
        <template v-else-if="item.type === 'range-picker'">
          <a-range-picker
              style="width: 240px"
              v-model:value="formState[item.name]"
              :showTime="item.showTime === true ? true : false"
              :format="item.format"
          />
        </template>
        <template v-else-if="item.type === 'week-picker'">
          <a-week-picker
              v-model:value="formState[item.name]"
              :placeholder="item.placeholder"
          />
        </template>
        <template v-else-if="item.type === 'time-picker'">
          <a-time-picker
              v-model:value="formState[item.name]"
              :format="item.format ? item.format : 'HH:mm'"
          />
        </template>
        <!-- Select 选择器 -->
        <template v-else-if="item.type === 'select'">
          <a-select
              :placeholder="item.placeholder"
              :allowClear="item.allowClear"
              style="width: 200px"
              v-model:value="formState[item.name]"
              @change="handleQuery"
          >
            <a-select-option
                v-for="(list, i) in item.options"
                :value="list.id"
                :key="i"
            >
              {{ list.name }}
            </a-select-option>
          </a-select>
        </template>
        <template v-else-if="item.type === 'TreeSelect'">
          <a-tree-select
              style="width: 200px"
              v-model:value="formState[item.name]"
              show-search
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :placeholder="item.placeholder"
              allow-clear
              multiple
              tree-default-expand-all
              :tree-data="item.data"
          />
        </template>
      </a-form-item>
    </template>
  </a-form>
  <div class="search">
    <a-space>
      <a-button type="primary" @click="handleQuery">查询</a-button>
      <a-button @click="handleReset">刷新</a-button>
      <a-button @click="handleOther" v-if="defaultProps.otherBt">{{ defaultProps.otherMsg }}</a-button>
      <a-button
          type="link"
          v-if="formSearchData.length > 2"
          @click="isExpand = !isExpand"
          class="flex items-center"
      >{{ isExpand ? "合并" : "展开" }}
        <down-outlined v-if="isExpand"/>
        <up-outlined v-else/>
      </a-button>
    </a-space>
  </div>
</template>

<script setup>
import {ref, computed, watch} from "vue";
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";

const defaultProps = defineProps({
  formFields: {
    type: Array,
    required: true,
  },
  otherBt: {
    type: Boolean,
    default: false
  },
  otherMsg: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(["search", "reset", "other"]);
// 收缩展开
const isExpand = ref(false);
// 新增修改表单操作
const formRef = ref();
const obj = {};
defaultProps.formFields.forEach((list) => {
  obj[list.name] = list.value;
});

const formState = ref(obj);

watch(
    defaultProps.formFields,
    () => {
      defaultProps.formFields.forEach((list) => {
        formState.value[list.name] = list.value;
      });
    },
    {deep: true}
);
const formSearchData = computed(() => defaultProps.formFields);

const handleQuery = () => {
  emit("search", formState.value);
};
const handleReset = () => {
  formRef.value.resetFields();
  emit("reset", formState.value);
};
const handleOther = () => {
  emit("other", formState.value);
}
// 将方法暴露出
defineExpose({
  handleReset,
  // handleOther
});
</script>
<style scoped>
.search-form {
  flex: 1;
}

.search {
  flex-shrink: 0;
  white-space: nowrap;
}
</style>
